<template>
    <div class="form">
        <el-form ref="form" :model="obj.data" label-width="80px">
            <el-form-item label="姓名" prop="name" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.name" placeholder="请输入姓名" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="登录名" prop="uname" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.uname" placeholder="请输入登录名" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass" :rules="[ { required: props.id==0, message: '密码不能为空'} ]" v-if="props.id==0">
                <el-input v-model="obj.data.pass" placeholder="请输入密码" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="级别" prop="rank" :rules="[formRulesMixin.notNull]">
                <el-select v-model="obj.data.rank" placeholder="请选择级别" clearable @change="obj.data.dept_id=obj.data.rank==2?[]:''">
                    <el-option v-for="(item,index) in proxy.$setting.globalData.ranks" :key="index" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="部门" prop="dept_id" :rules="[formRulesMixin.notNull]" v-if="obj.data.rank!=3">
                <el-select v-model="obj.data.dept_id" placeholder="请选择部门" clearable :multiple="obj.data.rank==2">
                    <el-option v-for="(item,index) in obj.depts" :key="index" :label="item.name" :value="item.dept_id" />
                </el-select>
            </el-form-item>
            <el-form-item label="权限" prop="flag" :rules="[formRulesMixin.notNull]">
                <el-select v-model="obj.data.flag" placeholder="请选择权限" clearable multiple>
                    <el-option v-for="(item,index) in proxy.$setting.globalData.flags" :key="index" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>
        <div class="btns">
            <span class="btn clear" @click="$emit('close')">取消</span>
            <span class="btn sub" @click.prevent="upData">提交</span>
        </div>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, computed, onMounted } from 'vue'
    let { proxy } = getCurrentInstance()
    const emit = defineEmits(['init', 'close']) //此处要完全对应，采用固定的update:prop属性
    const props = defineProps({
        id: { type: Number, require: true, default: 0 },
    })

    let obj = reactive({
        data:{
            "userid": '',
            "uname": "",
            "pass": "",
            "name": "",
            "dept_id": "",
            "rank": "",
            "flag": ""
        },
    })

    onMounted(async()=>{
        obj.depts = await getdapts()
        init()
    })

    let get = () => {
        return new Promise((resolve, reject) => {
            proxy.$ajax({
                url: '/manager/user/get',
                data: { userid: props.id },
                bfLoading: true
            }).then(d => {
                resolve(d.msg)
            }).catch(e => {
                reject(e)
            })
        })
    }
    let init = async () => {
        if(props.id > 0) {
            let u = await get()
            obj.data = { 
                ...obj.data,
                ...u,
                userid: props.id,
                dept_id: obj.data.rank==2?u.dept_id.split(','):parseInt(u.dept_id),
                flag: u.flag.split(','),
            }
        }
    }

    const getdapts=()=>{
        return new Promise((resolve, reject) => {
            proxy.$ajax({
                url: '/manager/department/list',
                data: {},
                bfLoading: true
            }).then(d => {
                resolve(d.msg.list||[])
            }).catch(e => {
                resolve([])
            })
        })
    }

    let upData = () => {
        proxy.$refs['form'].validate(valid => {
            if (valid) {
                proxy.$ajax({
                    url: '/manager/user/design',
                    data: {
                        ...obj.data,
                        dept_id: obj.data.rank==2?obj.data.dept_id.join(','):obj.data.dept_id,
                        flag: obj.data.flag.join(','),
                    },
                    bfLoading: true
                }).then(data => {
                    if(data.success){
                        proxy.elMessageMixin(`${obj.data.userid > 0 ? '保存' : '添加'}成功`, 'success')
                        proxy.$emit('close')
                        proxy.$emit('init')
                    }else{
                        ElMessage({ message: data.err, type: 'error', duration: 2 * 1000 })
                    }
                }).catch(() => {})
            } else {
                return false
            }
        })
    }
</script>

<style scoped>
    .checkboxgroup { display: flex; }
</style>

